import { CheckIcon } from 'lucide-react'
import { memo } from 'react'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { useAIChatStore } from '@/hooks/useAIChat'
import type { LiveStreamConfigPreset } from '@/hooks/useAIChat'
import { Badge } from '@/components/ui/badge'

export const LiveStreamConfigSelector = memo(() => {
  const {
    liveStreamConfigs,
    activeLiveStreamConfigId,
    setActiveLiveStreamConfig,
  } = useAIChatStore()

  const activeConfig = liveStreamConfigs.find(
    (c: LiveStreamConfigPreset) => c.id === activeLiveStreamConfigId,
  )

  if (liveStreamConfigs.length === 0) {
    return null
  }

  return (
    <div className="flex items-center gap-2">
      {/* <span className="text-sm text-muted-foreground">当前场景:</span> */}
      <Select
        value={activeLiveStreamConfigId || undefined}
        onValueChange={setActiveLiveStreamConfig}
      >
        <SelectTrigger className="w-[200px] h-9">
          <SelectValue placeholder="未选择配置">
            {activeConfig ? (
              <div className="flex items-center gap-2">
                <Badge variant="secondary" className="text-xs">
                  {activeConfig.name}
                </Badge>
              </div>
            ) : (
              '未选择配置'
            )}
          </SelectValue>
        </SelectTrigger>
        <SelectContent>
          {liveStreamConfigs.map((preset: LiveStreamConfigPreset) => (
            <SelectItem key={preset.id} value={preset.id}>
              <div className="flex items-center gap-2">
                <span>{preset.name}</span>
                {activeLiveStreamConfigId === preset.id && (
                  <CheckIcon className="h-4 w-4 text-green-600" />
                )}
              </div>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
})

LiveStreamConfigSelector.displayName = 'LiveStreamConfigSelector'

